<template>
  <a-card
    :loading="loading"
    :body-style="{ padding: '16px 16px 8px 16px' }"
    :bordered="false"
  >
    <div class="chart-card-header">
      <div class="meta">
        <span class="chart-card-title">{{ projectNo }}</span>
        <span style="margin: 0 8px; color: #d9d9d9">|</span>
        <span class="chart-card-title">{{ title }}</span>
      </div>
    </div>
    <div class="chart-card-content">
      <img src="../..//assets/svg/任务.svg" />
      <span>任务 {{ projectCnt.taskCnt }}</span>
      <span class="cus-span">|</span>
      <img src="../..//assets/svg/调查反馈.svg" />
      <span>调查反馈 {{ projectCnt.feedbackCnt }}</span>
      <span class="cus-span">|</span>
      <img src="../..//assets/svg/要求完成时间@1.5x.svg" />
      <span>当月到期 {{ projectCnt.expireCnt }}</span>
      <span class="cus-span">|</span>
      <img src="../..//assets/svg/风险.svg" />
      <span>风险 {{ projectCnt.riskCnt }}</span>
    </div>
    <div class="chart-card-footer">
      <span style="margin: 0 16px">
        工程规划时间：2024-01-01 至 2025-01-01
      </span>
      <a-button type="link" size="small"> 进入管理空间&nbsp;&gt; </a-button>
    </div>
  </a-card>
</template>

<script>
export default {
  name: "ArchitectCard",
  // projectCnt : "taskCnt", "feedbackCnt", "expireCnt", "riskCnt"
  props: ["projectNo", "title", "total", "loading", "projectCnt"],
};
</script>

<style scoped lang="less">
.ant-card {
  border-radius: 4px;
  height: 124px;
  margin: 0 8px;
  box-shadow: 0px 2px 6px 0px rgba(0, 75, 255, 0.2);
}
.chart-card-header {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.chart-card-header .meta {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 16px;
  line-height: 22px;

  .chart-card-title {
    font-family: MicrosoftYaHei-Bold;
    font-size: 16px;
    color: #333333;
    font-weight: 700;
  }
}

.chart-card-content {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  margin: 16px 0 8px;
  display: flex;
  img {
    margin: 0 7px;
    width: 18px;
    height: 18px;
  }
  .cus-span {
    color: #d9d9d9;
    margin-left: 10px;
  }
}

.chart-card-footer {
  margin: 0 -16px;
  background: #f7f7f7;
  height: 40px;
  border-radius: 0 0 6px 6px;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  align-items: center;
  .ant-btn-link {
    font-size: 12px;
    margin-left: auto;
    margin-right: 16px;
  }
}
</style>
